<template>
  <div class="success-box">
    <div>
      <img :src="SuccessBg" alt="" class="success-img" />
      <je-button type="primary" class="success-btn" @click="handleLogout">安全退出</je-button>
    </div>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, onUnmounted } from 'vue';
  import SuccessBg from '@/assets/success/bg.png';
  import { Button } from '@jecloud/ui';
  import { AccountLogout } from '@/api';
  import { logout } from '@common/helper/system';
  export default defineComponent({
    name: 'Success',
    components: {
      JeButton: Button,
    },
    setup() {
      const data = reactive({
        SuccessBg,
      });
      const handleLogout = () => {
        AccountLogout().then((res) => {
          if (res.code == 1000 && res.success) {
            logout();
          }
        });
      };
      const methods = {};
      return {
        handleLogout,
        ...toRefs(data),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .success-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .success-img {
      width: 600px;
      height: auto;
      display: block;
      margin-top: -15%;
    }
    .success-btn {
      display: block;
      margin: 0 auto;
    }
  }
</style>
